<template>
  <div class="newhouse">
    <div class="toplist">
      <p>
        <span>
          <van-icon name="arrow-left" />
        </span>
        <input type="text" placeholder="请输入楼层名称" v-model="values" @input="handle" />
        <span>地图找房</span>
      </p>
    </div>
    <div v-for="(val,i) in list" :key="i" class="tablis">
      <li>
        <img :src="val.img" alt />
      </li>
      <div class="tab">
        <h3>{{val.listingTitle}}</h3>
        <p>{{val.detailAddress}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getNewHouseList } from "@/api/user.js";
export default {
  data() {
    return {
      values: "",
      list: [],
      classify: 1
    };
  },
  methods: {
    handle() {
      //调用数据
      this.getList();
    },
    getList() {
      //这里面都是后台所传的数据
      //  id是字符串*1是数字
      getNewHouseList({
        classify: this.$route.params.id * 1,
        values: this.values
      }).then(res => {
        this.list = res.data;
      });
    }
  },
  created() {
    this.getList();
  }
};
</script>
<style scoped="scss">
.toplist p {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  padding-top: 10px;
}
.toplist p input {
  width: 65%;
  height: 36px;
  border: solid 1px #ccc;
  border-radius: 10px;
}
</style>